(function(vue){
	// html模板信息
  var template = '<nav aria-label="Page navigation" class="text-right"  id="pagination">'+
					  '<ul class="pagination">'+
					    '<li><a href="#" aria-label="首页"  @click="first"><span aria-hidden="true">首页</span></a></li>'+
					    '<li><a href="#" @click="previous">&lt;</a></li>'+
					    '<li v-for="page in showPages" class="pageNum"  :class="{active:page.active}" ><a href="#" @click="show($event.target)">{{page.num}}</a></li>'+
					     '<li><a href="#" @click="next">&gt;</a></li>'+
					    '<li><a href="#" aria-label="尾页" @click="last"><span aria-hidden="true">尾页</span></a></li></ul>'+
					  '<ul class="pagination">'+
					 	'<li><a href="#">转到</a></li>'+
					 	'<li><a><input type="text" style="width: 2.5em;height: 1.4em;text-align: center;line-height: 0.4em;margin-right: 5px;" class="jumpPage"/>页/共{{total}}页</a></li>'+
					    '<li><a href="#">共{{count}}条记录</a></li>'+ 
					     '<li><a href="#" class="btn" @click="jumpPage">GO</a>'+					    		 
					    '</li></ul></nav>' 
	var pagination = vue.extend({
     template: template,
     props: [
             'current',
             'total',
             'count',
             'showPages',
             'pageNum',
             'defaultShowCount'
             ],                
     methods: {      	     		
 		changeStyle:function(pageNum){
 			//判断总数是否超过5页 				
 			if(this.total >this.defaultShowCount){
 				//数字差
 				var numSpan  = parseInt(this.defaultShowCount/2);
 				var firstPageNum = pageNum-numSpan;
 				var lastPageNum  = pageNum+numSpan;
 				//如果最后页大于总页数
 				if(lastPageNum>this.total){					
 					firstPageNum=firstPageNum-lastPageNum+this.total;
 					lastPageNum = this.total;
 				}
 				if(firstPageNum <= 1){
 					lastPageNum = lastPageNum-firstPageNum+1;
 					firstPageNum = 1;
 				}
 				var newShowPages = [];
 				for(var i = 0;i<this.defaultShowCount;i++){
 					newShowPages.push({num:firstPageNum+i,active:false});
 				}
 				this.showPages = newShowPages;				
 			}
 			//add style
 			for(var i =0 ;i<this.showPages.length;i++){
 				if(this.showPages[i].num == pageNum){
 					this.showPages[i].active=true;
 				}else{
 					this.showPages[i].active=false;
 				} 				
 			}
 		},
 		showByPageNum:function(pageNum){
 			//$emit和$on成对应关系
 			paginationApp.$emit("getPages",pageNum);
 		},
		 // 显示内容
		show:function(obj){
			//add active
			var num = parseInt($(obj).text());
			$(".jumpPage").val(num);
			this.changeStyle(num);
			this.current =num;
			this.showByPageNum(num);			
		},
		previous:function(){
			if(this.current >1){
				this.current = this.current-1;
				this.changeStyle(this.current);
				$(".jumpPage").val(this.current);
			}
			//TODO changeshowpages
			this.showByPageNum(this.current);
		},
		next:function(){
			if(this.current <this.total ){
				this.current = this.current+1;
				this.changeStyle(this.current);
				$(".jumpPage").val(this.current);
			}
			this.showByPageNum(this.current);
		},
		first:function(){
			this.current = 1;
			this.changeStyle(this.current);
			this.showByPageNum(this.current);
			$(".jumpPage").val(this.current);
		},
		last:function(){
			this.current = this.total;
			this.changeStyle(this.current);
			this.showByPageNum(this.current);
			$(".jumpPage").val(this.current);
		},
		jumpPage:function(){	
			var jumpPage = parseInt($(".jumpPage").val());
			this.changeStyle(jumpPage);
			this.current =jumpPage;
			this.showByPageNum(jumpPage);
		}
    }
  })
  		vue.Pagination = pagination;  
})(Vue);

//将myComponent组件注册到Vue实例下
var paginationApp = new Vue({
	el: '#pagination',
    data: {
        current:1,
		total:1,
		showPages:[{num:1,active:true}],
		defaultShowCount:5,
		count:0,
		component_name:'child'
    },
    components: {
      // 引用组件
      'vue-pagination':Vue.Pagination
    },
    methods: { 
     	init:function(count,pageCount){
			//vue remove getPages function
			this.$off("getPages");
			this.count = count;
			if(!this.count){
				this.count = 0;
			}
			var totalPage = Math.ceil(count/pageCount);
			if(!totalPage){
				totalPage = 1;
			}
			this.total = totalPage;
			this.current=1;
			this.showPage= [];
			var showPageCount = 5;
			if(totalPage<this.defaultShowCount){
				showPageCount=totalPage;
			}
			this.showPages=[];
			for(var i = 0 ;i<showPageCount;i++){	
				var isActive=false;
				if(i == 0){
					isActive=true;
				}
				this.showPages.push({num:i+1,active:isActive});
			}
			$(".jumpPage").val(this.current);
			  //默认显示第一页
		},
		next:function(){
			if(this.current <this.total ){
				
				this.current = this.current+1;
				this.changeStyle(this.current);
				$(".jumpPage").val(this.current);
			}
			this.showByPageNum(this.current);
		}
	}
})





